import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import {
    Breadcrumb,
    Container,
    ListGroup,
    Pagination
} from 'react-bootstrap';
import classNames from 'classnames'; 
import queryString from 'query-string'; 

import {
    function_get_deploy_task
} from '../../actions/task';

import { 
    URL,
    TASKDETAIL_FROM,
    TaskStatus
} from '../../config';

import './less/list.css';

class App extends Component {

    state = {
        page: queryString.parse(this.props.location.search).page,
        total: 0
    }

    componentDidMount(){
        function_get_deploy_task(this.state.page, this.props.dispatch, (page, total)=>this.setState({page, total}));
    }

    render () {
        return (
          <Container>
            <Breadcrumb>
              <Breadcrumb.Item href={URL.main_page}>主页</Breadcrumb.Item>
              <Breadcrumb.Item active>待上线请求</Breadcrumb.Item>
            </Breadcrumb>   
            <ListGroup className="taskList">
            {this.props.list.map(item => {
                return (
                    <ListGroup.Item key={item.taskId} className="taskItem">
                        <div className="left">
                            <div className="title">
                                <Link to={URL.taskdetail_page + "?pid=" + item.projectId + "&tid=" + item.taskId + "&from=" + TASKDETAIL_FROM.DEPLOYING}>{ item.projectName + "/" + item.title }</Link>
                                {this.props.myuid === item.developer ?
                                    <Link to={URL.addtask_page + "?pid=" + item.projectId + "&tid=" + item.taskId} className="icon">&#xe606;</Link>
                                : null}
                            </div>
                            <div className="author">{ "#"+item.taskId + " 提交人 " + item.developer_nick}</div>
                        </div>
                        <div className="right">
                            {item.status === TaskStatus.WAIT_FOR_TEST ? <div className={classNames("status", "text-success")}>等待测试</div> : null}
                            {item.status === TaskStatus.TESTING ? <div className={classNames("status", "text-warning")}>测试中</div> : null}
                            {item.status === TaskStatus.TEST_FAILED ? <div className={classNames("status", "text-danger")}>暂停测试</div> : null}
                            {item.status === TaskStatus.WAIT_FOR_DEPLOY ? <div className={classNames("status", "text-primary")}>待上线</div> : null}
                            {item.status === TaskStatus.PRE_TESTING ? <div className={classNames("status", "text-warning")}>预发布测试中</div> : null}
                            {item.status === TaskStatus.PRE_TESTING_FAIL ? <div className={classNames("status", "text-danger")}>预发布暂停测试</div> : null}
                            {item.status === TaskStatus.PRE_TESTING_SUCCESS ? <div className={classNames("status", "text-success")}>预发布测试通过</div> : null}
                            {item.status === TaskStatus.DEPLOY_FAILED ? <div className={classNames("status", "text-danger")}>上线失败</div> : null}
                            {item.status === TaskStatus.DEPLOYING ? <div className={classNames("status", "text-warning")}>上线中</div> : null}
                            <div className="time">{"提交于 " + item.time}</div>
                        </div>
                    </ListGroup.Item>
                )
            })}
            </ListGroup>
            <Pagination size="lg">
                <Pagination.First href={URL.deploying_page + "?page=1"} title="首页" />
                <Pagination.Prev href={URL.deploying_page + "?page=" + (this.state.page - 1)} title="上一页" disabled={this.state.page <= 1} />
                <Pagination.Next href={URL.deploying_page + "?page=" + (this.state.page + 1)} title="下一页" disabled={this.state.page >= this.state.total} />
                <Pagination.Last href={URL.deploying_page + "?page=" + (this.state.total)} title="最后一页" />
            </Pagination>
          </Container>  
        )
    }    
}

function mapStateToProps (state) {
    return {
        list: state.tasks.deployingTasks,
        myuid: state.account.uid,
    }
  }
  
  export default connect(mapStateToProps)(App);